<template>
  <div class="SubKind.vue">
    <!-- 分类详情 -->
    <div class="header">
      <img @click="$router.back(-1)" :src="require('@/assets/imgs/icons/arr-l.png')" alt class="head-icon head-search">
      <h2 class="head-zaowu">ZAOWU 造物</h2>
      <div class="head-icons">
        <img :src="require('@/assets/imgs/icons/chat.png')" alt class="head-icon head-chat">
        <img :src="require('@/assets/imgs/icons/cart.png')" alt class="head-icon head-cart">
      </div>
    </div>
    <div class="mai-goods-lists">
      <ul class="goods-title">
        <li class="goods-item">新品</li>
        <li class="goods-item">
          新品
          <img :src="require('@/assets/imgs/icons/filter-arr.png')" alt class="goods-item-icon">
        </li>

        <li class="goods-item">
          排序
          <img @click="exeSort" :src="require('@/assets/imgs/icons/filter-arr.png')" alt class="goods-item-icon">
        </li>
        <li class="goods-item">新品</li>
      </ul>
    </div>
    <div class="mai-goods-msg">
      <div class="mai-goods-msg-arr">无痕</div>
      <div class="mai-goods-msg-arr">美背</div>
      <div class="mai-goods-msg-arr">运动</div>
      <div class="mai-goods-msg-arr">性感</div>
    </div>
    <kindSub :bannerkinds="goodsItems" ref="mySort"></kindSub>
  </div>
</template>

<script>
import bannerkindApi from "@/api/kind/kind.js";

import kindSub from "./components/KindSub";
export default {
  name: "SubKind.vue",
  components: {
    kindSub
  },
  data() {
    return {
    };
  },
  computed: {
    //共享的数据写在计算属性里
    goodsItems() {
      return this.$store.state.goodsDetaul.goodsList;
      // return this.$store.getters['goodsDetaul/goodsList'];
    }
  },
  methods: {
    
    exeSort(){
      this.$refs.mySort.upgo();
    },
    goBack(){
      console.log(111)
      this.$router.go(-1)
    }
  }
};
</script>

<style lang='scss' scoped>
@import "@/assets/style/commin.scss";

.header {
  display: flex;
  padding: 0 $basPadding;
  justify-content: space-between;
  align-items: center;
  // background-color: pink;
  margin-bottom: 13.5px;
  width: 100%;
  height: 28px;
  .head-zaowu {
    font-size: 20px;
    color: #000;
    padding-left: 20px;
  }
  .head-icons {
    .head-chat {
      margin-right: 20px;
    }
  }
  .head-icon {
    width: 20px;
    height: 20px;
  }
  .head-search {
  }
}
.mai-goods-lists {
  background-color: #f9f9f9;
  height: 44px;
  .goods-title {
    line-height: 44px;
    height: 100%;
    display: flex;
    justify-content: space-around;
    .goods-item {
      color: #010e0d;
      font-size: 14px;
      position: relative;
      .goods-item-icon {
        position: absolute;
        right: -15px;
        top: 50%;
        margin-top: -6px;
        width: 12px;
        // height: 14px;;
      }
    }
  }
}
.mai-goods-msg {
  display: flex;
  justify-content: space-around;
  height: 23px;
  margin-top: 11.5px;
  margin-bottom: 12px;
  .mai-goods-msg-arr {
    width: 51px;
    height: 100%;
    background-color: #f9f9f9;
    text-align: center;
    line-height: 23px;
  }
}
</style>
